<!-- 输入框 -->
<script setup>
// #导出vue方法
import { ref, defineProps, defineEmits, computed } from "vue";
// -------------------------------------------------------------------
const props = defineProps({
	// 表头
	label: String,
	// 提示
	placeholder: String,
	// 选择的单元
	modelValue: String,
	// 警告文本
	warningTxt: String,
	// 规则
	rules: Array,
});
const emit = defineEmits(["update:modelValue"]);

const updateValue = (value) => {
	emit("update:modelValue", value);
};

// 计算指定指定规则
const CheckRulesRequired = computed(() => {
	let res = false;
	if (props.rules && props.rules.includes("required")) {
		// 必须填写
		if (!props.modelValue) {
			res = true;
		}
	}

	return res;
});
</script>

<template>
	<div class="form-row">
		<div class="row-label">
			{{ label }}
		</div>

		<div class="row-content">
			<div class="row-com">
				<div class="form-textarea">
					<textarea
						:value="modelValue"
						:placeholder="placeholder"
						@input="updateValue($event.target.value)"
					/>
				</div>
			</div>

			<!-- 警告信息 -->
			<div class="warning" v-if="CheckRulesRequired">
				<span>*</span>
				<span>{{ warningTxt }}</span>
			</div>
		</div>
	</div>
</template>

<style scoped lang="less">
.form-textarea {
	width: 100%;
	height: 200px;
	background-color: #dbe2ef;
	border-radius: 4px;
	padding: 6px;

	textarea {
		width: 100%;
		height: 100%;
		resize: none;
		border: none;
		outline: none;
		background: none;

		color: #333333;
		font-size: 30px;
		line-height: 3rem;
		letter-spacing: 2px;
	}
}
</style>
